<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Examples</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="" rel="stylesheet" />
</head>

<body>
    <div id="app">
        <button @click="tab('step1')">第一步</button>
        <button @click="tab('step2')">第二步</button>
        <button @click="tab('step3')">第三步</button>
        <keep-alive>
            <component :is="name"></component>
        </keep-alive>
    </div>
    <script src="../vue.js"></script>
    <script>
        var step1={
            template:"<div>这是第一步操作</div>"
        }
        var step2={
            template:"<div>这是第二步操作</div>"
        }
        var step3={
            template:"<div>这是第三步操作</div>"
        }
         new Vue({
            el: "#app",
            data: {
                // 默认显示的内容
                name:"step1"
            },
            components:{
                step1,
                step2,
                step3
            },
            methods:{
                tab(val){
                    this.name=val;
                }
            }
        })
    </script>
</body>

</html>